<style lang="less">
	@import './unlock.less';
</style>

<template>
	<transition name="show-unlock">
		<div class="unlock-body-con" v-if="showUnlock" @keydown.enter="handleUnlock">
			<div @click="handleClickAvator" class="unlock-avator-con" :style="{marginLeft: avatorLeft}">
				<img class="unlock-avator-img" :src="avatorPath">
				<div class="unlock-avator-cover">
					<span><Icon type="unlocked" :size="30"></Icon></span>
					<p>解锁</p>
				</div>
			</div>
			<div class="unlock-avator-under-back" :style="{marginLeft: avatorLeft}"></div>
			<div class="unlock-input-con">
				<div class="unlock-input-overflow-con">
					<div class="unlock-overflow-body" :style="{right: inputLeft}">
						<input ref="inputEle" v-model="password" class="unlock-input" type="password" placeholder="密码同登录密码"/>
						<button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup" @click="handleUnlock" class="unlock-btn">
							<Icon color="white" type="key"></Icon>
						</button>
					</div>
				</div>
			</div>
			<div class="unlock-locking-tip-con">已锁定</div>
		</div>
	</transition>
</template>

<script>
    import Cookies from 'js-cookie';
    import util from '@/libs/util';
    import md5 from 'md5';
    export default {
        name: 'Unlock',
        data () {
            return {
                avatorLeft: '0px',
                inputLeft: '400px',
                password: ''
            };
        },
        props: {
            showUnlock: {
                type: Boolean,
                default: false
            }
        },
        computed: {
            avatorPath () {
                return localStorage.avatorImgPath;
            }
        },
        methods: {
            handleClickAvator () {
                this.avatorLeft = '-180px';
                this.inputLeft = '0px';
                this.$refs.inputEle.focus();
            },
            handleUnlock () {
				/*   if (Cookies.get('password') === this.password) {
				 this.avatorLeft = '0px';
				 this.inputLeft = '400px';
				 this.password = '';
				 this.$store.commit('unlock');
				 this.$emit('on-unlock');
				 } else {
				 this.$Message.error('密码错误,请重新输入。如果忘了密码，清除浏览器缓存重新登录即可，这里没有做后端验证');
				 }*/
                let me = this;
                util.post({
                    url: "unlock",
                    data: {
                        username:Cookies.get("user"),
                        password: md5(this.password)
                    },
                    ajaxSuccess(res){
                        me.$store.commit('unlock');
                        me.$store.commit('updateMenulist');
                        me.$router.push({
                            name: Cookies.get('last_page_name') // 解锁之后跳转到锁屏之前的页面
                        });
                    }
                });
            },
            unlockMousedown () {
                this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn';
            },
            unlockMouseup () {
                this.$refs.unlockBtn.className = 'unlock-btn';
            }
        }
    };
</script>
